Vue.component("right-box", {
    data() {
        return {
            rightShow: true
        }
    },
    template: `
        <div class="right" :class="{'right-show':rightShow}">
            <div class="toggle-btn" @click="rightShow=!rightShow"><i class="el-icon-d-arrow-right" v-if="rightShow"></i><i class="el-icon-d-arrow-left" v-else></i></div>
            <div class="top">
                <span class="time">59:39</span>
                <button data-v-52ddb4a4="" type="button" class="btn add-time-btn btn-secondary"  @click="open">
                    延时
                </button>
            </div>
            <div class="modes">
                <div class="modes-btn"> <i class="el-icon-sort" style="transform: rotate(90deg);"></i>切换界面</div>
            </div>
            <div class="divide"></div>
            <button class="stop-lab-btn"><i class="el-icon-video-pause"></i>关闭环境</button>
            <div class="divide"></div>
            <ul>
                <li @click="open">剪切板</li>
                <li @click="open">共享桌面</li>
                <li @click="open">下载代码</li>
                <li @click="open">桌面全屏</li>
                <li @click="open">环境信息</li>
            </ul>
            <div class="divide"></div>
            <ul>
                <li @click="open">SSH直连</li>
                <li @click="open">保护环境</li>
                <li @click="open">更多会员权益</li>                    
            </ul>
            <div class="divide"></div>
            <ul>
                <li @click="open">新手指南视频</li>                  
            </ul>
        </div>
    `,
    methods: {
        open() {
            this.$alert('这是一段内容', '标题名称', {
                confirmButtonText: '确定',
                callback: action => {
                    this.$message({
                        type: 'info',
                        message: `action: ${action}`
                    });
                }
            });
        }
    }
})